<template>
  <scroll-pane ref="scrollPane" class="tags-view-wrapper">
    <template #default>
      <div
        v-if="showProjectList"
        :class="currentProjectId ? '' : 'active'"
        class="tags-view-item"
        style="padding: 0 18px"
        @click="handleSelectedTag()"
      >
        {{ name === 'driver' ? '驱动程序库' : '项目列表' }}
      </div>
      <div
        v-for="(tag, tagIndex) in tagsData"
        :key="tag.projectId"
        :class="currentProjectId === tag.projectId ? 'active' : ''"
        class="tags-view-item"
        @click="handleSelectedTag(tag)"
      >
        {{ tag.name }}
        <span
          v-if="name === '' ? checkPermission('projectManagement:projectSetting:close') : true"
          :class="tag.saved ? '' : 'redDot'"
          class="el-icon-close"
          @click.prevent.stop="closeSelectedTag(tag, tagIndex)"
        />
      </div>
    </template>
  </scroll-pane>
</template>
<script>
import { checkPermission } from '@/directive/permission/checkPermission.js' // 权限判断指令
import ScrollPane from '@/layout/components/TagsView/ScrollPane'
export default {
  components: { ScrollPane },
  props: {
    name: {
      type: String,
      default: ''
    },
    showProjectList: {
      type: Boolean,
      default: true
    },
    tagsData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      currentProjectId: null
    }
  },
  watch: {
    currentProjectId: {
      handler(val, oldValue) {
        this.$emit('changePageType', val, oldValue)
      }
    }
  },
  methods: {
    checkPermission(val) {
      return checkPermission(val)
    },
    handleSelectedTag(tag = {}) {
      this.currentProjectId = tag.projectId
    },
    closeCurrentTag() {
      let index = this.tagsData.findIndex((item) => item.projectId === this.currentProjectId)
      this.closeSelectedTag(this.tagsData[index], index)
    },
    closeTag(tag, tagIndex) {
      this.tagsData.splice(tagIndex, 1)
      if (this.tagsData.length > 0) {
        if (tag.projectId === this.currentProjectId) {
          if (tagIndex < this.tagsData.length) {
            this.currentProjectId = this.tagsData[tagIndex].projectId
          } else {
            this.currentProjectId = this.tagsData[tagIndex - 1].projectId
          }
        }
      } else {
        this.currentProjectId = null
      }
      this.$emit('closeTag', tag.chipType)
    },
    closeSelectedTag(tag, tagIndex) {
      if (!tag.saved) {
        this.$confirm('是否要保存当前项目?', '', {
          distinguishCancelAndClose: true,
          confirmButtonText: '关闭并保存当前配置',
          cancelButtonText: '直接关闭项目',
          showClose: false,
          center: true
        })
          .then(() => {
            this.$emit('saveProjectSetting')
            this.closeTag(tag, tagIndex)
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
          })
          .catch((action) => {
            if (action === 'cancel') {
              this.closeTag(tag, tagIndex)
            }
          })
      } else {
        this.closeTag(tag, tagIndex)
      }
    },
    changeSaved(isSaved) {
      this.tagsData.every((item) => {
        if (item.projectId === this.currentProjectId) {
          item.saved = isSaved
          return false
        }
        return true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.tags-view-wrapper {
  height: 36px;
  background: #e4e7ee;
  /deep/.el-scrollbar__view {
    height: 100%;
    // overflow-y: hidden;
  }
  .tags-view-item {
    display: inline-block;
    position: relative;
    cursor: pointer;
    user-select: none;
    height: 36px;
    line-height: 36px;
    border: 1px solid #d8dce5;
    color: #495060;
    background: #fff;
    padding: 0 8px;
    font-size: 13px;

    &:last-of-type {
      margin-right: 15px;
    }
    &.active {
      background-color: #4861e0;
      color: #fff;
      border-color: #4861e0;
    }
    /deep/ .el-icon-close {
      width: 16px;
      height: 16px;
      vertical-align: 2px;
      border-radius: 50%;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 100% 50%;
      &:before {
        transform: scale(0.6);
        display: inline-block;
        vertical-align: -3px;
        content: '\e6db';
      }
      &:hover {
        background-color: #b4bccc;
        color: #fff;
      }
    }
    .redDot {
      &:before {
        content: '';
        width: 12px;
        height: 12px;
        background: #f56c6c;
        border-radius: 50%;
      }
      &:hover:before {
        content: '\e6db';
        background: transparent;
      }
    }
  }
}
</style>
